<template>
  <div class="cs-page-container">
    <el-button type="primary" style="margin: 10px" v-if="userCanEdit" @click="debug = !debug">{{ debug ? "关闭编辑" : "编辑页面" }}</el-button>
    <!-- <el-tabs :v-model="tabIndex" :editable="debug" type="border-card" @tab-add="addPage" @tab-remove="deletePage"> -->
    <el-tabs :v-model="tabIndex" :editable="debug" type="border-card" @tab-add="addPage" >
      <el-tab-pane v-for="(item, index) in componentList" :key="index" :name="index.toString()" :label="item.configData.title" :lazy="true">
        <keep-alive>
          <component :is="item.componentName" :from-id="item.id" :debug="debug" @buildInDialog="buildInDialog"></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import tabPage from './tabPage';
import {
  xhrGetPageComponent, xhrSetComponent, xhrDeleteComponent, xhrRequestList, xhrUserCanEdit
} from '@/api/page'
export default {
  name: 'Index',
  components: { tabPage },
  props: {
    fromId: {
      type: Number,
      default: 0
    },
    givenPageId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      pagePath: null,
      componentList: [],
      pageId: this.givenPageId,
      userCanEdit: false,
      debug: false,
      tabIndex: 0
    }
  },
  created() {
    this.loadRequest()
    this.checkUserCanEdit()
  },

  mounted() {

  },
  methods: {
    loadRequest: function() {
      xhrRequestList().then(resp => {
        this.$route.meta.requestList = resp.data.list
        this.loadPage()
      })
    },
    doSearch: function() {
    },
    checkUserCanEdit() {
      xhrUserCanEdit().then(resp => {
        this.userCanEdit = resp.data
      })
    },
    loadPage: function() {
      if (this.$route.meta) {
        if (this.$route.meta.pageId) {
          this.pageId = this.$route.meta.pageId
        } else {
          this.$route.meta.pageId = this.pageId
        }
      } else {
        this.$route.meta = {
          pageId: this.pageId
        }
      }
      if (this.pageId) {
        xhrGetPageComponent({ pageId: this.pageId })
          .then(resp => {
            for (const i in resp.data.list) {
              resp.data.list[i].configData = JSON.parse(resp.data.list[i].configData)
            }
            this.$route.meta['pageComponents'] = resp.data.list
            this.componentList = []
            for (const i in this.$route.meta.pageComponents) {
              if (this.$route.meta.pageComponents[i].pid === this.fromId) {
                this.componentList.push(this.$route.meta.pageComponents[i])
              }
            }
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      }
      this.pagePath = this.$route.path
    },
    addPage: function() {
      this.$prompt('请输入tab名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const data = {
          pageId: this.pageId, configData: JSON.stringify({ 'title': value }), componentName: 'tabPage', pid: 0
        }
        xhrSetComponent(data)
          .then(resp => {
            this.$message.success('添加成功')
            this.loadPage(0)
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    deletePage: function(option) {
      const deletePageId = this.componentList[option].id
      this.$confirm('确认删除该页面吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        xhrDeleteComponent({ componentId: deletePageId })
          .then(resp => {
            this.$message.success('删除成功')
            this.loadPage(0)
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    buildInDialog(operation, row) {
      this.$emit('buildInDialog', operation, row)
    }
  }
}
</script>

<style scoped>
.debug{
  position: absolute;
  z-index: 100;
  right: 16px;
}
</style>
